import { Container, Navbar } from 'react-bootstrap'
import { Link } from 'react-router-dom'
import auth from '../store/auth'
import { observer } from 'mobx-react-lite'
import user from '../store/user'
import proposals from '../store/proposals'

export const Header = observer(() => {
    auth.isLogIn && user.SetUserInfo()
    return (
        <Navbar bg='dark' data-bs-theme='dark'>
            <Container>
                <Navbar.Brand>
                    <h1>Аренда автомобилей</h1>
                </Navbar.Brand>
                <Navbar.Text>
                    <Link to='/home'>На главную</Link>
                </Navbar.Text>
                <Navbar.Collapse className='justify-content-end'>
                    {!auth.isLogIn && (
                        <Navbar.Text>
                            <Link to='/login'>Войти</Link>
                        </Navbar.Text>
                    )}
                    {auth.isLogIn && (
                        <>
                            <Navbar.Text className='me-2'>
                                <Link
                                    to='/proposals'
                                    onClick={() => {
                                        proposals.SetProposals()
                                        proposals.proposal = undefined
                                    }}
                                >
                                    Заявки
                                </Link>
                            </Navbar.Text>
                            <Navbar.Text>
                                Вы вошли как: <Link to='/user'>{user.login}</Link>
                            </Navbar.Text>
                        </>
                    )}
                </Navbar.Collapse>
            </Container>
        </Navbar>
    )
})
